<script setup>
import HorizontalBarVue from "./components/HorizontalBar.vue"
import MapChartVue from "./components/MapChart.vue"
import RadarBarVue from "./components/RadarBar.vue"
import RadiueBarVue from "./components/RadiueBar.vue"
import RelationVue from "./components/Relation.vue"
import TotalDataVue from "./components/TotalData.vue"
import VerticalBarVue from "./components/VerticalBar.vue"
import WorldCloudVue from "./components/WorldCloud.vue"
import { getSereenList } from './api/sereen'
import { ref } from "vue"

const data = ref()
const loadData = async() => {
  data.value = await getSereenList()
  console.log(data.value);
}
loadData()
setInterval(() => {
  loadData()
},3000)
</script>

<template>
  <div v-if="data" class="bg-[url('assets/imgs/bg.jpg')] bg-cover bg-center h-screen text-white p-2 flex overflow-hidden">
    <!-- 左 -->
    <div class="flex-1 mr-5 bg-opacity-50 bg-slate-800 p-2 flex flex-col">
      <!-- 横向柱状图 -->
      <HorizontalBarVue :data="data.regionData" class="h-1/3 box-border pb-4"></HorizontalBarVue>
      <!-- 雷达图 -->
      <RadarBarVue :data="data.riskData" class="h-1/3 box-border pb-4"></RadarBarVue>
      <!-- 关系图 -->
      <RelationVue :data="data.relationData" class="h-1/3"></RelationVue>
    </div>
    <!-- 中 -->
    <div class="w-1/2 mr-5 flex flex-col">
      <!-- 数据总览图 -->
      <TotalDataVue :data="data.totalData" class="bg-opacity-50 bg-slate-800 p-2"></TotalDataVue>
      <!-- 地图 -->
      <MapChartVue :data="data.mapData" class="bg-opacity-50 bg-slate-800 p-2 mt-2 flex-1"></MapChartVue>
    </div>
    <!-- 右 -->
    <div class="flex-1 flex-1 bg-opacity-50 bg-slate-800 p-2 flex flex-col">
      <!-- 竖向图 -->
      <VerticalBarVue :data="data.serverData" class="h-1/3 box-border pb-4"></VerticalBarVue>
      <!-- 环形图 -->
      <RadiueBarVue :data="data.abnormalData" class="h-1/3 box-border pb-4"></RadiueBarVue>
      <!-- 文档云图 -->
      <WorldCloudVue :data="data.wordCloudData" class="h-1/3"></WorldCloudVue>
    </div>
  </div>
</template>

<style scoped>

</style>
